<template>
  <div>
    <nav-header title="文章详情"></nav-header>
    <!-- 内容部分 -->
    <div class="text">
      <p class="tab">{{ newslist.title }}</p>
      <!-- 作者 -->
      <div class="user">
        <span class="left">
          <van-image round width="60px" height="60px" :src="newslist.avatar">
            <template v-slot:error>加载失败</template>
          </van-image>
          <span class="username">
            <p class="name">{{ newslist.nickname }}</p>
            <p class="time">{{ newslist.time | moment }}</p>
          </span>
        </span>
        <span class="rigeht">
          <span class="yes" v-if="queall == newslist.is_like">√已关注</span>
          <span class="fals" v-if="queall == !newslist.is_like">+关注</span>
        </span>
      </div>
      <!-- 信息 -->
      <div class="bot">
        <van-image width="90%" v-for="(item, index) in newslist.imageSrc" :key="index" :src="item">
          <template v-slot:error>加载失败</template>
        </van-image>
        <p v-html="newslist.content"></p>
      </div>
    </div>



    <!-- 评论信息 -->
    <!-- <div v-if="count>0"> -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      
      <div class="sun" v-for="(item, index) in contentlist" :key="index">
        <div class="sun1" @click="reply(item)">
          <van-image round width="60px" height="60px" :src="item.info.avatar">
            <template v-slot:error>加载失败</template>
          </van-image>
          <div class="username1">
            <p class="name1">{{ item.info.nickname }}</p>
            <p class="zan1" v-html="item.content"></p>
            <p class="time1">{{ item.create_time | moment }}
              <span class="btn">{{ item.reply_num }}回复</span>
            </p>
          </div>
        </div>
        <span class="rigeht1">
          <van-icon name="good-job" size="20px" color="red" />
          <span class="yes">{{ item.like_count }}</span>
        </span>
      </div>
    </van-list>
    <!-- </div> -->
    <!-- <div v-if="count=0">
      <div class="sun">
        <div class="zanwu">
          暂无评论！！
        </div>
      </div>
    </div> -->

    <div style="width: 100%; height: 80px;"></div>
    <!-- 写评论 -->
    <div class="luns">
      <input type="text" :value="comment" name="" id="same" placeholder="写评论" @click="show = true">
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
        <textarea name="" cols="30" rows="10" v-model="comment" id="same01"></textarea>
      </van-popup>
      <!-- 发布评论 -->
      <van-icon name="comment-o" size="25px" @click="postComment()" />
      <!-- 收藏 -->
      <div class="shoucang">
        <van-icon name="star" v-if="newslist.is_fav == false" size="25px" @click="getLicke()" />
        <van-icon name="star" v-if="newslist.is_fav == true" size="25px" @click="getunLicke()" color="red" />
      </div>
      <!-- 点赞 -->
      <div class="zan01">
        <van-icon name="good-job" size="25px" v-if="newslist.is_like == false" @click="getlike()" />
        <van-icon name="good-job" size="25px" v-if="newslist.is_like == true" @click="getunlike()" color="red" />
      </div>
      <div class="zhuanfa">
        <van-icon name="share" size="25px" />
      </div>
    </div>
  </div>
</template>

<script>
import { Popup } from 'vant';
import NavHeader from "../../components/Nav-Header.vue";
export default {
  name: "App03HomeList",
  components: {
    NavHeader,
    [Popup.name]: Popup
  },
  data() {
    return {
      queall: true,
      newslist: {},
      contentlist: [],
      comment: '',
      show: false,
      userInfo: [],
      loading: false,
      finished: false,
      nums:0,
      id:'',
    };
  },

  mounted() {
    // 获取用户信息
    let userInfos = JSON.parse(localStorage.getItem('xl-userInfo'))
    this.userInfo = userInfos
    // 获取页面详情
    this.getNews()
    // 获取评论信息
    this.getPlun()
    // console.log(this.count)
  },

  methods: {
    getNews() {
      let { id, user_id } = this.$route.query

      this.$axios.post('/api/get_article_detail', {
        article_id: id, user_id: user_id
      }).then((res) => {
        console.log(res)
        this.newslist = res.data
        this.id=res.data._id
        // console.log(this.id)
      })
    },
    // 获取评论信息
    getPlun() {
      let { id, user_id } = this.$route.query
      this.$axios.post('/api/get_comment_list', {
        article_id: id, skip: 0, limit: 10, user_id: user_id
      }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.contentlist = res.data
        }
      })
    },
    // 发布评论
    postComment() {
      let { id } = this.$route.query;

      this.$axios.post('/api/add_comment', {
        user_id: this.userInfo._id,
        article_id: id,
        comment_type: 0,
        content: this.comment
      }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.$toast(res.msg)
          this.comment = '',
            this.getPlun()
        }
      })
    },
    // 收藏
    getLicke() {
      let { id , user_id } = this.$route.query;

      this.$axios.post('/api/add_fav', {
        article_id: id, user_id: user_id
      }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.getNews()
          this.$toast(res.msg)
        }
      })
    },
    // 取消收藏
    getunLicke() {
      let { id , user_id} = this.$route.query;

      this.$axios.post('/api/remove_fav', {
        article_id: id, user_id: user_id
      }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.getNews()
          this.$toast(res.msg)
        }
      })
    },
    // 加载
    onLoad() {
      // console.log('1111')
      let { id, user_id } = this.$route.query
      setTimeout(() => {
        let num1 = this.contentlist.length+ this.nums
        let num2 = Math.floor(Math.random() * 20) + 10

        this.$axios.post('/api/get_comment_list', {
          article_id: id, skip: num1, limit: num2,user_id: user_id
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              this.contentlist.push(res.data[i])
            }
            this.nums = this.nums + num2
          }
          this.loading = false;
          if (res.count.length == this.artile_list) {
            this.finished = true;
          }
          // console.log(this.artile_list.length)
          // console.log(res.count)
        })
      }, 1000);
    },
    // 点赞
    getlike(){
      let { id , user_id} = this.$route.query;
      this.$axios.post('/api/like',{
         article_id: id, user_id: user_id
      }).then(res=>{
        console.log(res)
        if(res.code ==0){
          this.getNews()
          this.$toast(res.msg)
        }
      })
    },
    // 取消点赞
    getunlike(){
      let { id , user_id} = this.$route.query;
      this.$axios.post('/api/unlike',{
         article_id: id, user_id: user_id
      }).then(res=>{
        console.log(res)
        if(res.code ==0){
          this.getNews()
          this.$toast(res.msg)
        }
      })
    },
    // 跳转到回复详情
    reply(item){
      localStorage.setItem('reply',JSON.stringify(item))
      console.log(this.id)
      this.$router.push({
        path:'/reply',
        query:{
          id:this.id,
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.text {
  margin-top: 30px;
  width: 100%;
  margin-bottom: 50px;

  // background-color: cyan;
  .tab {
    width: 90%;
    // height: 200px;
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    word-break: break-all;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
  }

  .user {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgb(212, 212, 212);

    .left {
      display: flex;
      align-items: center;
      margin-left: 15px;

      .username {
        margin-left: 10px;
        margin: auto 20px;

        .name {
          font-size: 15px;
          margin: 5px 0;
        }

        .time {
          font-size: 15px;
          color: rgb(207, 207, 207);
        }
      }
    }

    .rigeht {
      margin-right: 15px;

      .yes {
        width: 65px;
        height: 30px;
        display: block;
        border: 1px solid rgb(206, 206, 206);
        border-radius: 100px;
        background-color: rgb(78, 241, 241);
        text-align: center;
        line-height: 30px;
      }

      .fals {
        width: 65px;
        height: 30px;
        display: block;
        border: 1px solid rgb(209, 209, 209);
        border-radius: 100px;
        // background-color: cadetblue;
        text-align: center;
        line-height: 30px;
      }
    }
  }

  .bot {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    background-color: white;

    p {
      width: 90%;
      // height: 300px;
      text-align: left;
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      // word-wrap: break-word;
      padding-left: 20px;
      padding-top: 15px;
    }
  }
}

.sun {
  width: 95%;
  // height: 1000px;
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgb(204, 204, 204);
  // padding-bottom: 150px;
  // margin-bottom: 200px;
  position: relative;

  .zanwu {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: 800;

  }

  .sun1 {
    display: block;
    display: flex;
    border-color: aquamarine;
    margin-left: 15px;
    min-width: 100%;

    .username1 {
      margin-left: 10px;
      max-width: 80%;

      .name1 {
        font-size: 15px;
        color: cornflowerblue;
      }

      .zan1 {
        margin-top: 10px;
        width: 95%;
        word-break: break-all;
        word-wrap: break-word;

      }

      .time1 {
        margin-top: 10px;
        font-size: 14px;
        display: flex;

        .btn {
          display: block;
          width: 45px;
          height: 20px;
          border: 1px solid rgb(204, 204, 204);
          border-radius: 100px;
          text-align: center;
          line-height: 20px;
          margin-left: 15px;
          margin-bottom: 5px;
        }
      }
    }
  }

  .rigeht1 {
    margin-right: 15px;
    width: 50px;
    position: absolute;
    right: -10px;

    .yes {
      font-size: 19px;

    }
  }
}

.luns {
  width: 100%;
  height: 60px;
  // background-color: aqua;
  line-height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgb(204, 204, 204);
  background-color: white;
  z-index: 999;
  // margin-top: 100px;

  #same {
    width: 60%;
    height: 40px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 20px;
  }

  #same01 {
    width: 99%;
    height: 90%;
    font-size: 20px;
    line-height: 22px;
    border: none;
    padding-top: 10px;
    // border: 1px solid rgb(204, 204, 204);
    // border-radius: 20px;
  }

}
</style>
